/*
 * Create:      柿子
 * CreateDate:  2023/10/26
 * Describe：   床位图通用设置
 * */
import React, { Component } from 'react';
import { Collapse, Divider, Button } from 'antd';
import store from 'store';
import PublicTablePagination from 'pages/common/PubilcTablePagination';
import DynamicRenderingForm from 'pages/common/DynamicRenderingForm';
const Panel = Collapse.Panel;

class BedChartSetting extends Component {
  constructor(props) {
    super(props);
    this.state = {
      activeKey: [],
      templateInfoRowID: '',
      searchCriteriaRowID: '',
      rightClickOperationRowID: '',
      panelData: [{
        key: 'templateInfo',
        title: '模块信息',
        componentName: 'BedChartSettingTemplateInfo',
        tableData: [{ seqNo: 1, key: 1 }, { seqNo: 2, key: 2 }]
      }, {
        key: 'searchCriteria',
        title: '床位搜索条件设置',
        componentName: 'BedChartSettingSearchCriteria',
        tableData: [{ seqNo: 1, key: 1 }, { seqNo: 2, key: 2 }]
      }, {
        key: 'rightClickOperation',
        title: '鼠标右键操作设置',
        componentName: 'BedChartSettingRightClickOperation',
        tableData: [{ seqNo: 1, key: 1 }, { seqNo: 2, key: 2 }]
      }]
    };
    this.columns = [{
      key: 1,
      title: '序号',
      dataIndex: 'seqNo',
      align: 'center',
      width: '80'
    }, {
      key: 2,
      title: '内容',
      dataIndex: 'content',
      align: 'center',
      width: '150'
    }, {
      key: 3,
      title: '显示',
      dataIndex: 'show',
      align: 'center',
      width: '100'
    }]
  }

  componentDidMount() {
    const { panelData } = this.state;
    let activeKey = [];
    panelData.map((data, index) => {
      activeKey.push(index + 1)
      this.getTableColumns(data?.componentName || '', index)
    });
    this.setState({ activeKey });
  }

  // for顺序执行
  // getColumnsInOrder = async () => {
  //   const { panelData } = this.state;
  //   for (let i = 0; i < panelData.length; i++) {
  //     await this.getTableColumns(panelData[i], i);
  //   }
  //   // 这里放置所有请求结束后需要执行的代码
  // }

  // 获取表头数据
  getTableColumns = async (componentName, index) => {
    try {
      if (!componentName) return [];
      let { panelData } = this.state;
      let data = {
        params: [{
          compontName: componentName,
          type: 'C',
        }]
      }
      let res = await React.$asyncPost(this, '01040073', data);
      let columns = res.result?.C || [];
      let formData = res.result?.formData || []
      if (formData && formData.length > 0) {
        for (let i = 0; i < formData.length; i++) {
          formData[i].callBackResult = 'Fn';
          formData[i].changeCallBack = (e, dataIndex) => this.handleInputChange(e, dataIndex, componentName, index);
        }
      }
      panelData[index].columns = columns;
      panelData[index].totalWidth = res?.totalWidth || 0;
      panelData[index].formData = formData;
      this.setState({});
    } catch (error) {
      console.log(error)
    }
  }

  handleInputChange = (e, dataIndex, componentName, columnIndex) => {
    console.log('e', e, dataIndex, componentName, columnIndex)
  }

  handleCollapseChange = e => {
    this.setState({ activeKey: e });
  }

  // 移动
  handleMove = () => {

  }

  getOperationObj = (columnItem, columnIndex, tableData) => {
    // 列表操作
    const operationObj = {
      width: 100,
      title: '操作',
      align: 'center',
      key: 'operation',
      render: (text, record, index) => (
        <>
          <Button
            size="small"
            disabled={index === 0}
            onClick={(e) => this.handleMove(record, 'up', e)}
          >
            前移
          </Button>
          <Divider type="vertical" />
          <Button
            size="small"
            disabled={tableData?.length - 1 <= index}
            onClick={(e) => this.handleMove(record, 'down', e)}
          >
            后移
          </Button>
        </>
      ),
    };
    return operationObj;
  }

  // 操作行
  onClickRowPublic = (record, columnItem, columnIndex) => {
    let rowIDIndex = columnItem?.key + 'RowID';
    return {
      // 单击行选中
      onClick: () => {
        if (this.state[rowIDIndex] === '' || (this.state[rowIDIndex] && (this.state[rowIDIndex] !== record.key))) {
          this.setState({ [rowIDIndex]: record.key })
        } else {
          this.setState({ [rowIDIndex]: '' })
        }
      }
    }
  }

  // 选中行操作
  setRowClassNamePublic = (record, columnItem, columnIndex) => {
    let rowIDIndex = columnItem?.key + 'RowID';
    return record.key === this.state[rowIDIndex] ? 'clickRowStyle' : '';
  }

  render() {
    const { panelData, activeKey } = this.state;

    return (
      <div style={{ height: store.getState().tableHeight.y + 136 + 'px', overflow: 'auto', paddingRight: '6px' }}>
        <Collapse
          style={{ background: '#fff' }}
          bordered={false}
          activeKey={activeKey}
          onChange={this.handleCollapseChange}
        >
          {panelData && panelData.map((item, index) => {
            const formData = item?.formData || [];
            return (
              <Panel header={item?.title || ''} key={index + 1}>
                {formData && formData.length > 0 ? (
                  <DynamicRenderingForm
                    rowData={item?.rowData || {}}
                    selectData={item?.selectData || {}}
                    formData={formData}
                    onRef={ref => this[item?.key + 'FormRef'] = ref}
                  />
                ) : ''}
                <PublicTablePagination
                  param={{
                    loading: item?.loading || false,
                    data: item?.tableData || [], // 表格数据
                    x: 'none', // 表格的宽度
                    y: 'auto',
                    height: 'auto',
                    componentName: item?.componentName || '',
                    columns: 'columns' in item && Array.isArray(item.columns) && item.columns.length > 0 ? [...item.columns, this.getOperationObj(item, index, item?.tableData || [])] : this.columns, // 表头配置
                  }}
                  getColumns={() => this.getTableColumns(item?.componentName || '', index)}
                  onClickRowPublic={(record) => this.onClickRowPublic(record, item, index)}
                  setRowClassNamePublic={(record) => this.setRowClassNamePublic(record, item, index)}
                />
              </Panel>
            )
          })}
        </Collapse>
      </div>
    )
  }
};

export default BedChartSetting;